<template>
	<div class="UserRefundLong">
		<div class="UserRefundLong-itembox">
			<div class="UserRefundLong-title">
				订单信息
			</div>
			<div class="UserRefundLong-item">
				<div class="ui-left">姓名</div>
				<div class="ui-right">
					<input type="text" readonly v-model="contactName" />
				</div>
			</div>
			<div class="UserRefundLong-item">
				<div class="ui-left">地址</div>
				<div class="ui-right">
					<input type="text" readonly v-model="address" />
				</div>
			</div>
			<div class="UserRefundLong-item">
				<div class="ui-left">联系方式</div>
				<div class="ui-right">
					<input type="text" readonly v-model="contactPhone" />
				</div>
			</div>

		</div>
		<div class="UserRefundLong-itembox">
			<div class="UserRefundLong-title">
				退房信息
			</div>
			<div class="UserRefundLong-item">
				<div class="ui-left">退房时间</div>
				<div class="ui-right">
					<el-date-picker class="myel-date-picker" v-model="UserRefundLongdate" type="date" placeholder="选择退房时间，必填">
					</el-date-picker>
					<span class="more"></span>
				</div>
			</div>
			<div class="UserRefundLong-item">
				<div class="ui-left">退房原因</div>
				<div class="ui-right" @click="show1 = true">
					<input type="text" v-model="Reasonschecking" readonly placeholder="请选择退房原因,必填" />
					<span class="more"></span>
				</div>
			</div>
			<div class="UserRefundLongtextbox">
				<textarea class="UserRefundLong-text" v-model="refundDesc" placeholder="备注信息(选填)"></textarea>
			</div>
		</div>
		<div class="u-Becareful">
			为保障您的权益，提交申请后请尽快与房东联系，沟通结算租 金、押金等费用
		</div>

		<div class="UserRefundLongOK">
			<div @click="UserRefundLongOK" class="UserRefundLongOK-btn">
				提交退房
			</div>
		</div>

		<yd-actionsheet :items="myItems1" v-model="show1" cancel="取消"></yd-actionsheet>

	</div>
</template>

<script>
	import { mapGetters, mapActions } from 'vuex'
	import api from '../fetch/api'
	export default {
		name: 'UserRefundLong',
		data() {
			return {
				orderId: this.$route.query.orderId,
				contactName: this.$route.query.contactName,
				address: this.$route.query.address,
				contactPhone: this.$route.query.contactPhone,
				UserRefundLongdate: '',
				Reasonschecking: '',
				show1: false,
				myItems1: [{
						label: '换城市了',
						callback: () => {
							this.Reasonschecking = '换城市了';
							//                          this.$dialog.toast({mes: '房屋与实际不符'});
							/* 注意： callback: function() {} 和 callback() {}  这样是无法正常使用当前this的 */
						}
					},
					{
						label: '换工作了',
						callback: () => {
							this.Reasonschecking = '换工作了';
						}
					},
					{
						label: '服务不满意',
						callback: () => {
							this.Reasonschecking = '服务不满意';
						}
					},
					{
						label: '换个房间',
						callback: () => {
							this.Reasonschecking = '换个房间';
						}
					},
					{
						label: '其他',
						callback: () => {
							this.Reasonschecking = '其他';
						}
					}
				],
				refundDesc:"",//退房备注
				getHiss: JSON.parse(sessionStorage.getItem("userinfo")),
			}
		},
		mounted() {},
		computed: {
			...mapGetters([
				'source',
			])
		},
		methods: {
			...mapActions({
				setRedundInfo: 'setRedundInfo'
			}),
			UserRefundLongOK() {
				if(this.Reasonschecking == "") {

					this.$dialog.toast({
						mes: '请选择退房原因',
						timeout: 1000
					});
					return
				}
				if (this.UserRefundLongdate=='') {
					
					this.$dialog.toast({
						mes: '请选择时间',
						timeout: 1000
					});
					return
				}
				let nowdate=new Date();
//				if (this.UserRefundLongdate<nowdate) {
//					alert(1)
//				}
//				console.log(nowdate.getFullYear()+"-"+(nowdate.getMonth()+1)+"-"+nowdate.getDate())
				let YY=nowdate.getFullYear();
				let MM=nowdate.getMonth()+1;
				let DD=nowdate.getDate();
				this.UserRefundLongdate=YY+"-"+MM+"-"+DD;
				let ajaxSign = {
					source: this.source, // string 是
					token: this.getHiss.token, // string 是
					userId: this.getHiss.id.toString(), // string 是
					orderId: this.orderId.toString(), // string 是 订单id
					refundTime: this.UserRefundLongdate, // string 是 退房的时间2018 - 12 - 01
					content: this.Reasonschecking, // string 是 原因
					refundDesc: this.refundDesc, // string 否 备注
				}
				let ajaxData = api.getAES(ajaxSign);
				api.GetRefundInfolong(ajaxData)
					.then(res => {
						if (res.sta==200) {
							this.$router.go(-1)
						}
						this.$dialog.toast({
							mes: res.msg,
							timeout: 1000
						});
					})
			}
		}
	}
</script>

<style>
	body {
		background: #fff;
	}
	
	.UserRefundLong {
		width: 100%;
		background: #fff;
		color: #282828;
		font-size: .31rem;
		line-height: .31rem;
	}
	
	::-webkit-input-placeholder {
		font-size: .31rem !important;
		color: #a4a4a4;
	}
	
	.UserRefundLong-item {
		display: flex;
		justify-content: space-between;
		padding: .49rem .24rem;
		border-bottom: 1px solid #EEECEC;
		box-sizing: border-box;
	}
	
	.ui-right {
		display: flex;
		align-items: center;
	}
	
	.UserRefundLong input {
		border: none;
		height: .33rem;
		text-align: right;
		padding-right: .1rem;
		box-sizing: border-box;
		color: #A4A4A4;
	}
	
	.more {
		display: block;
		width: .23rem;
		height: .23rem;
		border: 1px solid #bcbcbc;
		box-sizing: border-box;
		transform: rotate(45deg);
		border-left: none;
		border-bottom: none;
	}
	
	.u-Becareful {
		font-size: .29rem;
		color: #A4A4A4;
		line-height: .56rem;
		padding: .24rem;
		box-sizing: border-box;
	}
	
	.UserRefundLongOK {
		width: 100%;
		padding-bottom: .42rem;
		box-sizing: border-box;
	}
	
	.UserRefundLongOK-btn {
		width: 3.85rem;
		height: .83rem;
		background: #E25051;
		font-size: .35rem;
		line-height: .83rem;
		text-align: center;
		color: #fff;
		margin: auto;
	}
	
	.UserRefundLong-title {
		font-size: .31rem;
		color: #A4A4A4;
		background: #EEECEC;
		line-height: .69rem;
		padding: 0 .24rem;
		box-sizing: border-box;
	}
	
	.UserRefundLongtextbox {
		width: 100%;
		padding: 0 .24rem;
		box-sizing: border-box;
	}
	
	.UserRefundLong-text {
		width: 100%;
		height: 2.77rem;
		border: none;
	}
	
	.myel-date-picker .el-input__prefix,
	.el-input__suffix {
		display: none;
	}
	
	.myel-date-picker .el-input--prefix .el-input__inner {
		padding-left: 0 !important;
	}
	
	.myel-date-picker .el-input--suffix .el-input__inner,
	.el-input--suffix .el-input__inner {
		padding-right: 0 !important;
	}
</style>